
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>GET Transaction</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
#container li {margin-left:2em;}
#container { background-color:#FFFFFF; border:1px dotted #666666; padding:1em; margin-bottom:1em;}
</style>


<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>GET Transaction</h1>

<div class="exampleIntro">
	<p>This example demonstrates how to send HTTP GET requests using <a href="http://developer.yahoo.com/yui/3/io/" title="YUI 3: IO">YUI 3's IO module</a>.  One transaction uses global event listeners to handle the transaction's lifecycle and response.  The other transaction uses both global and transaction-level events.</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="container">
	<ul>
    	<li>IO GET response data will appear here.</li>
    </ul>
</div>
<form>
	<input id="get1" type="button" value="GET with Global Listeners. " />
	<input id="get2" type="button" value="GET with Global and Transaction Listeners" />
</form>

<script>
YUI({ filter: 'raw' }).use("io-base", "node",

	function(Y) {

		//Get a reference to the DIV that we are using
		//to report results.
		var d = Y.one('#container'),
			gStr = '',
			tStr = '',
			state;

		/* global listener object */
		var gH = {
			write: function(s, args) {
					 gStr += "ID: " + s;
					 if (args) {
					 	gStr += " " + "The globally-defined arguments are: " + args;
					 }
					 gStr += "<br>";
			},
			start: function(id) {
					 // When transaction listeners are handled, its user-defined arguments
					 // are accessible in the arguments collection.  The following detection
					 // logic determines whether the output should account for transaction
					 // arguments.
					 args = state === 'global' ? arguments[1] : arguments[2];
					 this.write(id + ": Global Event Start.", args);
			},
			complete: function(id, o) {
					 args = state === 'global' ? arguments[2] : arguments[3];
					 this.write(id + ": Global Event Complete.  The status code is: " + o.status + ".", args);
			},
			success: function(id, o) {
					  args = state === 'global' ? arguments[2] : arguments[3];
					  this.write(id + ": Global Event Success.  The response is: " + o.responseText + ".", args);
			},
			failure: function(id, o) {
					  args = state === 'global' ? arguments[2] : arguments[3];
					  this.write(o + ": Global Event Failure.  The status text is: " + o.statusText + ".", args);
			},
			end: function(id) {
					 args = state === 'global' ? arguments[1] : arguments[2];
					 this.write(id + ": Global Event End.", args);
					 if (state === 'global') {
						 flush(gStr);
					 }
			}
		};
		/* end global listener object */

		/* transaction event object */
		var tH = {
			write: function(s, args) {
					 tStr += "ID: " + s;
					 if (args) {
					 	tStr += " " + "The arguments are: " + args;
					 }
					 tStr += "<br>";
				   },
			start: function(id, args) {
					 this.write(id + ": Transaction Event Start.", args.start);
				   },
			complete: function(id, o, args) {
						this.write(id + ": Transaction Event Complete.  The status code is: " + o.status + ".", args.complete);
				   },
			success: function(id, o, args) {
					   this.write(id + ": Transaction Event Success.  The response is: " + o.responseText + ".", args.success);
					 },
			failure: function(id, o, args) {
					   this.write(id + ": Transaction Event Failure.  The status text is: " + o.statusText + ".", args.failure);
					 },
			end: function(id, args) {
					 this.write(id + ": Transaction Event End.", args.end);
					 flush(gStr + tStr);
			}
		};
		/* end transaction event object */

		/* Output the results to the DIV container */
		function flush(s) {
			d.set("innerHTML", s);
			if (state === 'global') {
				gStr = '';
			}
			else {
				gStr = '';
				tStr = '';
			}
		}

		/* attach global listeners */
		Y.on('io:start', gH.start, gH, 'global foo');
		Y.on('io:complete', gH.complete, gH, 'global bar');
		Y.on('io:success', gH.success, gH, 'global baz');
		Y.on('io:failure', gH.failure, gH);
		Y.on('io:end', gH.end, gH, 'global boo');
		/* end global listener binding */

		/* configuration object for transactions */
		var cfg = {
			on: {
				start: tH.start,
				complete: tH.complete,
				success: tH.success,
				failure: tH.failure,
				end: tH.end
			},
			context: tH,
			headers: { 'X-Transaction': 'GET Example'},
			arguments: {
					   start: 'foo',
					   complete: 'bar',
					   success: 'baz',
					   failure: 'Oh no!',
					   end: 'boo'
					   }
		};
		/* end configuration object */

		function call(e, b) {
			if (b) {
				state = 'all';
				Y.io('assets/get.php?user=YDN&allListeners=1', cfg);
			}
			else {
				state = 'global';
				Y.io('assets/get.php?user=YDN&globalListeners=1');
			}
		}

		Y.on('click', call, "#get1", this, false);
		Y.on('click', call, "#get2", this, true);
	});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
